<template>
  <h1 ref="TitleRef"> 我是标题 </h1>
  <button @click="clickFn"> 操作 DOM </button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
/**
 * 类型推导机制：const TitleRef: Ref<null>
 * const TitleRef = ref(null); - 这样写的话值就永远都为 null，需手动泛型指定类型
 * 如果不确定类型是什么 可以 console.dir(TitleRef.value) 打印看他原型上的类型
 */
const TitleRef = ref<HTMLHeadingElement | null>(null);
const clickFn = () => {
  console.dir(TitleRef.value);
  if (TitleRef.value) TitleRef.value.innerText = '123';
};
</script>
